<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

        <html lang="zh">

        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>${readercard.name}的主页</title>
            <link rel="shortcut icon" href="img/library.ico" />
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
            <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

            <style>
                body {
                    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                    background-image: url('img/华师2.jpg.v');
                    /* 更改为你想使用的图片路径 */
                    background-size: cover;
                    /* 保证图片覆盖整个背景 */
                    background-position: center center;
                    /* 确保图片居中显示 */
                    color: var(--dark-text);
                    min-height: 100vh;
                    padding-top: 60px;
                }

                /* 自定义导航栏样式 */
                .navbar {
                    background-color: #fff !important;
                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                    padding: 10px 0;
                    position: fixed;
                    top: 0;
                    width: 100%;
                    z-index: 1000;
                }

                .navbar-brand p {
                    font-family: "华文行楷", "楷体", cursive;
                    font-size: 28px;
                    font-weight: bold;
                    color: #337ab7 !important;
                    margin: 0;
                }

                .navbar-nav .nav-link {
                    color: #333 !important;
                    font-weight: 500;
                    padding: 10px 15px;
                    transition: all 0.3s ease;
                }

                .navbar-nav .nav-link:hover {
                    color: #fff !important;
                    background-color: #337ab7 !important;
                }

                .navbar-nav .nav-link:active {
                    color: #fff !important;
                    background-color: #2c3e50 !important;
                    transform: scale(0.98);
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                }

                .navbar-right .nav-link {
                    color: #337ab7 !important;
                }

                /* 页面内容样式 */
                .main-container {
                    padding: 30px;
                    background-color: #fff;
                    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
                    border-radius: 10px;
                    max-width: 1200px;
                    /* 限制容器的最大宽度 */
                    margin: 30px auto;
                    /* 自动水平居中，并且设置顶部和底部的间距 */
                }


                .panel {
                    margin: 20px auto;
                    max-width: 80%;
                    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
                }

                .panel-title {
                    font-size: 1.8rem;
                    font-weight: 600;
                }

                .table th,
                .table td {
                    vertical-align: middle;
                    padding: 12px;
                    text-align: left;
                }

                .table th {
                    background-color: #f8f9fa;
                    font-weight: 600;
                }

                tr:hover {
                    background-color: #f1f1f1;
                }

                /* 按钮样式 */
                .btn-success {
                    background-color: #28a745;
                    border-color: #28a745;
                    font-weight: 500;
                }

                .btn-success:hover {
                    background-color: #218838;
                    border-color: #1e7e34;
                }

                .alert {
                    margin-top: 20px;
                }

                .panel-body {
                    padding: 20px;
                }

                .panel-heading {
                    background-color: #fff;
                    padding: 15px;
                    border-radius: 10px 10px 0 0;
                }
            </style>
        </head>

        <body>

            <!-- 自定义导航栏 -->
            <nav class="navbar navbar-expand-lg navbar-light">
                <div class="container-fluid">
                    <a class="navbar-brand" href="reader_main.html">
                        <p class="text-primary" style="font-family: 华文行楷; font-size: 28px;">智慧图书馆</p>
                    </a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav me-auto">
                            <li class="nav-item">
                                <a class="nav-link" href="reader_books.html">图书查询</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="reader_info.html">个人信息</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="mylend.html">我的借还</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="reader_repasswd.html">密码修改</a>
                            </li>
                        </ul>
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link" href="reader_info.html">${readercard.name}, 已登录</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="login.html">退出</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>

            <div id="header" style="padding-bottom: 80px"></div>

            <!-- 成功或错误信息 -->
            <c:if test="${!empty succ}">
                <div class="alert alert-success alert-dismissable">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                    ${succ}
                </div>
            </c:if>
            <c:if test="${!empty error}">
                <div class="alert alert-danger alert-dismissable">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                    ${error}
                </div>
            </c:if>

            <!-- 个人信息表格 -->
            <div class="col-xs-5 col-md-offset-3 main-container">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">我的信息</h3>
                    </div>
                    <div class="panel-body">
                        <table class="table table-hover">
                            <tr>
                                <th width="20%">读者证号</th>
                                <td>${readerinfo.readerId}</td>
                            </tr>
                            <tr>
                                <th>姓名</th>
                                <td>${readerinfo.name}</td>
                            </tr>
                            <tr>
                                <th>性别</th>
                                <td>${readerinfo.sex}</td>
                            </tr>
                            <tr>
                                <th>生日</th>
                                <td>${readerinfo.birth}</td>
                            </tr>
                            <tr>
                                <th>地址</th>
                                <td>${readerinfo.address}</td>
                            </tr>
                            <tr>
                                <th>电话</th>
                                <td>${readerinfo.phone}</td>
                            </tr>
                        </table>
                    </div>
                    <a class="btn btn-success btn-sm" href="reader_info_edit.html" role="button">修改</a>
                </div>
            </div>

        </body>

        </html>